<template>
    <van-nav-bar left-arrow fixed title="消费记录" @click-left="router.back()" />
    <div style="height: 46px;"></div>
    <van-swipe-cell v-for="(item, index) in state.ConsumeData">
        <van-card :key="item.id" :price="item.total" :desc="item.content"
            :title="userStore.userInfo.nickname + '的订单' + (index + 1)">
            <template #footer>
                <span>{{ item.time_text }}</span>
            </template>
        </van-card>
        <!-- 侧滑块 => 向左滑 -->
        <template #right>
            <van-button square text="删除" @click="onDelete(item.id)" type="danger" class="delete-button" />
        </template>
        <hr>
    </van-swipe-cell>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { onMounted, reactive } from 'vue'
import apiList from '@/api'
import { useUserStore } from '@/store/user.js'
import resJudge from '@/hooks/res.js'
import { showConfirmDialog } from 'vant'

const userStore = useUserStore()
const router = useRouter()
const state = reactive({
    ConsumeData: []
})

onMounted(() => {
    getConsumeData()
})

async function getConsumeData() {
    let res = await apiList.OrderConsume({ busid: userStore.userInfo.id })
    if (res.code == 1) {
        state.ConsumeData = res.data
    }
    // console.log(state.ConsumeData);time_text
}

function onDelete(id) {
    showConfirmDialog({
        message: '确定删除吗？',
    })
        .then(async () => {
            let res = await apiList.OrderConsumeDel({ busid: userStore.userInfo.id, id })
            resJudge(res)
            getConsumeData()
        })
        .catch(() => {
            // on cancel
        });
}
</script>

<style lang="scss" scoped>
.delete-button {
    height: 100%;
}
</style>